<template>
  <div>
    <a-card :bordered="false">
      <div class="safety">
        <h2>
          安全库存数：<span v-if="safetyStock != null">{{ safetyStock }}</span>
        </h2>
        <a-button type="link" @click="setStock">编辑</a-button>
      </div>
    </a-card>
    <a-card :bordered="false" style="margin-top:24px;">
      <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps">
        <span slot="ebStatus" slot-scope="text">
          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
        </span>
        <span slot="action" slot-scope="text, record">
          <a-popconfirm title="确定启用吗?" ok-text="Yes" cancel-text="No" @confirm="handleEnable(record, 1)" v-if="record.ebStatus == 0">
            <a href="#">启用</a>
          </a-popconfirm>
          <a-popconfirm title="确定禁用吗?" ok-text="Yes" cancel-text="No" @confirm="handleEnable(record, 0)" v-if="record.ebStatus == 1">
            <a href="#">禁用</a>
          </a-popconfirm>
          <!-- <a @click="handleEnable(record, 1)" v-show="record.ebStatus == 0">启用</a>
          <a @click="handleEnable(record, 0)" v-show="record.ebStatus == 1">禁用</a> -->
          <a-divider type="vertical" />
          <a @click="handleEdit(record)">库存调拨</a>
        </span>
      </s-table>
    </a-card>
    <a-modal v-model="visibleStock" title="安全库存" @ok="handleOk">
      设置安全库存：
      <a-input-number id="inputNumber" v-model="value" :min="0" :precision="0" :formatter="limitNumber" :parser="limitNumber" />
    </a-modal>
    <AllotModal ref="allotModal"></AllotModal>
  </div>
</template>
<script>
import { STable, Ellipsis } from '../../components'
import { getEbSafetyStock, setEbSafetyStock, ebStoreList, ebOpenOrClose } from '@/api/box/setting'
import AllotModal from './modules/allotModal'
let columns = [
  {
    title: '内淘门店',
    dataIndex: 'storeName'
  },
  {
    title: '内淘状态',
    dataIndex: 'ebStatus',
    scopedSlots: { customRender: 'ebStatus' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]
const statusMap = {
  0: {
    status: 'error',
    text: '禁用'
  },
  1: {
    status: 'success',
    text: '启用'
  }
}
export default {
  components: { STable, Ellipsis, AllotModal },
  data() {
    return {
      columns,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      loadData: parameter => this.fetchList(parameter),
      safetyStock: null,
      visibleStock: false,
      value: null
    }
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    }
  },
  mounted() {
    this.getSafety()
  },
  methods: {
    limitNumber(value) {
      if (typeof value === 'string') {
        return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
      } else if (typeof value === 'number') {
        return !isNaN(value) ? String(value).replace(/\./g, '') : 0
      } else {
        return 0
      }
    },
    getSafety() {
      getEbSafetyStock().then(res => {
        if (res.code == 0) {
          this.safetyStock = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    fetchList(parameter) {
      let params = {
        page: parameter
      }
      return ebStoreList(params).then(res => {
        if (res.code == 0) {
          return {
            data: res.data,
            page: res.page
          }
        } else {
          this.$message.warning(res.msg)
          return {
            data: [],
            page: {
              pageNo: 1,
              pageSize: 10,
              count: 0
            }
          }
        }
      })
    },
    setStock() {
      this.visibleStock = true
      this.value = this.safetyStock
    },
    setSafety() {
      setEbSafetyStock(this.value).then(res => {
        if (res.code == 0) {
          this.$message.success('修改成功！')
          this.visibleStock = false
          this.safetyStock = this.value
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleOk() {
      if (this.value == null) {
        this.visibleStock = false
        return
      }
      this.setSafety()
    },
    handleEdit(record) {
      this.$refs.allotModal.show(record.id)
    },
    handleEnable(record, type) {
      ebOpenOrClose(record.id).then(res => {
        if (res.code == 0) {
          record.ebStatus = type
          this.$forceUpdate()
          this.$message.success('修改成功')
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.safety {
  display: flex;
  align-items: center;
  h2 {
    margin-bottom: 0;
  }
}
</style>

